<template>
    <div>
        <headerSearch :title="headerTitle" :searchBack="true" @done="gotobtn"></headerSearch>
        <!-- 搜索框 -->
        <div class="search_all_intop" :style="search_intop" v-if="searchISshow"> </div>
        <div class="search_all" v-if="searchISshow">
            <span class="search_span clear">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" v-model="search" placeholder="搜索">
                <i class="iconfont icon-guanbi" v-if="clearShow" @click="clearClick"></i>
            </span>
            <button class="search_cancel fr" @click="searchCancel">取消</button>
        </div>
        <div class="pagecontent">
            <div class="association_lists main-user-circle" v-for="(list, index) in circlelist" :key="index">
                <div  class="clear fl" style="margin: 0.2rem;" @click="JumpList(list.cid,list.c_check_status)">
                    <div class="association_left_circle fl" style="margin-right: 0.2rem;">
                        <img :src="list.img" v-if="list.img">
                        <img src="../common/images/youquan.png" alt="" v-if="list.c_type == 3 && !list.img">
                        <span class="circle_user_one" style="color: #DD948E;" v-if="list.c_type == 1 || list.c_type == 2">{{list.c_name.substring(0,1)}}</span>
                        <!-- <span class="circle_user_one" style="color: #fff;" :style="'background-color:' + list.bgcolor" v-if="list.c_type == 1 || list.c_type == 2">{{list.c_name.substring(0,1)}}</span> -->
                    </div>
                    <div class="association_desc fr">
                        <h5>{{list.c_name}}</h5>
                        <p v-if="list.c_brief">{{list.c_brief}}</p>
                        <p v-else>暂无简介</p>
                    </div>
                </div>
                <div class="btn_small_red fr" style="margin-right: 0.2rem;" @click="JumpList(list.cid,list.c_check_status)">
                    <!-- <button>沟通</button> -->
                    <button v-if = "list.c_check_status == 4">待通过</button>
                    <button v-else-if = "list.c_check_status == 2 ">待审核</button>
                    <button v-else-if = "list.c_check_status == 3 ">未通过</button>
                    <button v-else-if = "list.c_check_status == 1 || list.c_check_status == 5 ">已通过</button>
                </div>
            </div>
            <!-- <div v-if="circlelist.length == 0" style="font-size: 0.3rem; color: #666; margin-top:1rem;">
                暂无数据  ╮(￣▽￣)╭
            </div> -->
            <div v-if="circlelist.length === 0" class="contentEmpty" style="margin-top: 1.2rem;">
                <img src="../common/images/Disappointment.png" alt="">
                <em>暂无查询结果</em>
            </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import {
    MessageBox
  } from 'mint-ui';
    export default {
        data() {
            return {
                headerTitle: '我的圈子',
                // circlelist: '',
                searchISshow: false,   //关键字搜索框出现
                clearShow: false,      //清除内容
                search: '',            //输入内容
                items: [],
                search_intop: '',
            }
        },
        components: {
            headerSearch
        },
        created() {
            let that = this;
            that.userInfo = window.localStorage.getItem('userInfo');
            that.userInfo = JSON.parse(that.userInfo);
            that.getcircleList(that.userInfo.uid);
        },
        watch: {
            search(value) {
                if(value != '') {
                  this.clearShow = true;
                  this.search_intop = 'background-color: transparent; z-index: 0;'
                }else {
                  this.clearShow = false;
                  this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);'
                }
            }
        },
         mounted: function () {
          // let that = this;
          // var user = Promise.resolve(this.getUserInfo())
          // user.then(
          //   function (result) {
          //     that.userInfo = result;
          //     that.getcircleList(result.uid);
          //     //获取用户相关信息
          //     // that.getUserInfos(result.uid);
          //   })
          
        },
        methods: {
            infoClick() {
                this.$router.push({
                    path: '/information'
                })
            },
            getcircleList: function (uid) {
                let that = this;
                // console.log(Math.ceil(that.screenWidth / 3));
                this.$fetch(that.$path + '/api.php/Circle/getcircleList', {
                    uid: that.userInfo.uid,
                    type: 2
                  })
                  .then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                      // that.circleWidth = (Number(res.data.length) + 1) * (that.companyLiWidth + 15) + 10;
                      that.items = res.data;
                    }
                });
            },
            JumpList: function (event, status) {
                if (status == 2) {
                  MessageBox('提示', '请耐心等待管理员审核...')
                } else {
                  this.$router.push({
                    path: '/userCenter/circleindex',
                    query: {
                      paicheNo: event
                    }
                  });
                }

            },
            addCircle: function () {
                let that = this;
                let uid = that.userInfo.uid;
                this.$post(
                    that.$path + '/api.php/company/getAuthCompanyList', {
                      userId: uid
                    })
                  .then((res) => {
                    if (res.code == '-1') {
                      MessageBox.alert('您需要先绑定企业').then(action => {
                        this.$router.push({
                          path: '/companyCreate'
                        });
                      });
                    } else {
                      this.$router.push({
                        path: '/crcircle'
                      });
                    }

                  })
            },
            // 点击搜索图标出现搜索框
            gotobtn() {
              this.searchISshow = true;
            },
            // 点击取消隐藏搜索框
            searchCancel() {
              this.searchISshow = false;
              this.search = '';
            },
            // 清除内容
            clearClick() {
              this.search = '';
            },
        },
        computed: {
            //过滤方法
          circlelist: function() {
            let that = this;
              var _search = that.search;
              if (_search) {
                  //不区分大小写处理
                  var reg = new RegExp(_search, 'ig')
                  //es6 filter过滤匹配，有则返回当前，无则返回所有
                  return that.items.filter(function(e) {
                      //匹配所有字段
                      return Object.keys(e).some(function(key) {
                          let data = e.c_name + e.c_brief;
                          return data.match(reg);
                      })
                      //匹配某个字段
                      //  return e.name.match(reg);
                  })
              };
              return that.items;
          }
        },  
    }
</script>

<style>
.main-user-circle {
    background-color: #fff;
}

/* 我的圈子 */
.association_left_circle {
    width: 1rem;
    height: 1rem;
    text-align: center;
    vertical-align: middle;
    display: block;
}
.association_left_circle img {
    height: 1rem;
    max-width: 100%;
    max-height: 100%;
    vertical-align: super;
}

/* 圈子默认截取第一个字 */
.association_left_circle .circle_user_one {
    width: 1rem !important;
    height: 1rem;
    vertical-align: super;
    font-size: 0.3rem !important;
    line-height: 1rem;
    text-align: center;
    box-sizing: border-box;
    background: url('../common/images/UI-04.png') no-repeat center;
    background-size: cover;
}



/* 关键字搜索 */
.search_all_intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
}
.search_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    background-color: #e50838;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
}
.search_all .search_span {
    position: relative;
    width: 100%;
    height: 0.88rem;
}
.search_all .search_span .icon-sousuo {
    font-size: 0.3rem !important;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0.16rem 0.2rem 0 -0.6rem;
    box-sizing: border-box;
    height: 0.88rem;
    margin-bottom: -0.3rem;
}
.search_all .search_span input {
    display: inline-block;
    width: 6.5rem;
    margin: 0 auto;
    margin-left: -0.7rem;
    height: 0.54rem;
    line-height: 0.54rem;
    background-color: #fff;
    margin-top: -0.1rem;
    border-radius: 4px;
    padding-left: 0.5rem;
    font-size: 0.28rem;
}
.search_all .search_span .icon-guanbi {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.14rem 0.12rem 0 0.12rem;
}
.search_all .search_cancel {
    margin-top: -0.65rem;
    margin-right: 0.12rem;
    font-size: 0.28rem;
    color: #fff;
}

</style>